<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>个人信息</title>
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="jquery.cookie.js"></script>
    <link rel="icon" href="images/student.png" type="img/x-ico" />
</head>

<body>

  <ul>
    <li><a class="active" href="Student.html">返回上一页</a></li>
    <li><a href="">个人信息</a></li>
  </ul>
  <h1>你的个人信息：</h1><br>
  <div id="t">
      <table id="table" class="mytable" border="2" bgcolor="#f0f8ff"></table>
  <!--<p id="p1"></p><br>-->
  <!--<p id="p2"></p><br>-->
  <!--<p id="p3"></p>-->
      <br><br>
    <input type="password" id="newPassword" placeholder="输入你的新密码">
    <input type="button" id="a" value="更新密码">
  </div>

</body>

<style>
  body {
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
    /*设置字体为sans-serif*/
    background-image: url(images/library.jpg);
    background-size: 100% 100%;
    background-attachment: fixed;
    /*背景图片尺寸为覆盖cover*/
  }

  h1{
      text-align: center;
  }
  p{
    text-align: center;
  }
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }

  li {
    float: left;
  }

  li a,
  .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  li a:hover,
  .user:hover,
  .dropdown:hover {
    background-color: #111;
    /*鼠标移动时背景颜色*/
  }

  .search input {
    float: left;
    flex: 4;
    height: 30px;
    outline: none;
    border: 1px solid white;
    box-sizing: border-box;
    padding-left: 10px;
  }

  .search button {
    float: right;
    flex: 1;
    height: 30px;
    background-color: rgb(63, 224, 245);
    color: white;
    border-style: none;
    outline: none;
  }

  .search button i {
    font-style: normal;
  }

  .search button:hover {
    font-size: 20px;
    background-color: rgb(63, 224, 245);
  }

  #t{
      padding-left:42%;
  }
  mytable {
      width: 500px;
      border: 2px;
      text-align: center;
      border-collapse: collapse;
      background-color: cornsilk;
      padding-left:20%;
  }

  .mytable tr {
      width: 100px;
      padding-left:15%;
  }
  #a{
      background: transparent;
      border: none;
      outline: none;
      font-size: 15px;
      color: #03a9f4;
      background: rgb(190, 221, 247);
      margin-left: 0%;
      cursor: pointer;
      /*光标呈现为指示链接的指针（一只手）*/
      border-radius: 10px;
      position: relative;
      top: auto;
  }
</style>
<script>
  window.onload=function(){
    var user = {
      userId:$.cookie('student'),
      userPassword:$.cookie('stdPasswd')
    }
      var html = "<tr><th>你的姓名</th><th>你的ID</th><th>你的密码</th></tr>"
    $.ajax({
      type: 'post',//get是获取数据，post是带数据的向服务器发送请求
      url: '/user/login',
      dataType: 'json',
      data: JSON.stringify(user),
      contentType: "application/json",
      success: function (res) {
          html = html +  "<tr><td>" + res.user.userName + "</td><td>" + res.user.userId + "</td><td>" + res.user.userPassword+ "</td></tr>";
        // document.getElementById("p1").innerHTML=res.user.userName;
        // document.getElementById("p2").innerHTML=res.user.userId;
        // document.getElementById("p3").innerHTML=res.user.userPassword;
          $("#table").html(html)
      },
      error: function (res) {
        alert("JSON数据获取失败，请联系管理员！");
      }
    })
  }
  $("#a").click(function () {

    var user = {
      userId:$.cookie('student'),
      userPassword:$("#newPassword").val()
    }
    var newPasswd = user.userPassword
      if(newPasswd==""){
          alert("对不起，密码不能为空")
      }else{
          if(user.userPassword.length>8){
              alert("密码格式错误，请输入少于8位的纯数字！")
          }else {
              $.ajax({
                  type: 'post',//get是获取数据，post是带数据的向服务器发送请求
                  url: '/user/changeInformation',
                  dataType: 'json',
                  data: JSON.stringify(user),
                  contentType: "application/json",
                  success: function (res) {
                      alert(res.msg+'\n'+"你的新密码为:"+user.userPassword)
                      window.location.href="Login.html"
                      // document.getElementById("p3").innerHTML=newPasswd;
                  },
                  error: function (res) {
                      alert("JSON数据获取失败，请联系管理员！");
                  }
              })
          }

      }
  });
</script>
</html>
